{% extends "base.html" %}

{% block title %}传播规律分析 - 滩羊疫病监测系统{% endblock %}

{% block extra_css %}
<style>
.chart-container {
    position: relative;
    height: 300px;
    margin-bottom: 1.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">传播规律分析</h1>
        <a href="{{ url_for('pathogen.generate_report') }}" class="btn btn-primary">
            <i class="bi bi-file-earmark-text"></i> 生成分析报告
        </a>
    </div>

    <div class="row">
        <!-- 左侧图表 -->
        <div class="col-md-6">
            <!-- 时间分布趋势 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">时间分布趋势</h5>
                    <div class="chart-container">
                        <canvas id="timeChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 类型关联分析 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">类型关联分析</h5>
                    <div class="chart-container">
                        <canvas id="correlationChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧图表 -->
        <div class="col-md-6">
            <!-- 地区分布热度 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">地区分布热度</h5>
                    <div class="chart-container">
                        <canvas id="regionChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 类型传播趋势 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">类型传播趋势</h5>
                    <div class="chart-container">
                        <canvas id="typeSpreadChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// 初始化时间分布趋势图
function initTimeChart() {
    const ctx = document.getElementById('timeChart').getContext('2d');
    const spreadData = JSON.parse('{{ spread_data|safe }}');
    const dates = spreadData.map(item => item.date);
    const uniqueDates = [...new Set(dates)].sort();
    const counts = uniqueDates.map(date => 
        spreadData.filter(item => item.date === date).length
    );

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: uniqueDates,
            datasets: [{
                label: '病原体数量',
                data: counts,
                borderColor: '#36A2EB',
                tension: 0.1,
                fill: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '病原体时间分布'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 初始化类型关联分析图
function initCorrelationChart() {
    const ctx = document.getElementById('correlationChart').getContext('2d');
    new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['病毒', '细菌', '寄生虫', '真菌'],
            datasets: [
                {
                    label: '病毒',
                    data: [0, {{ type_correlations.virus.bacteria }}, 
                             {{ type_correlations.virus.parasite }}, 
                             {{ type_correlations.virus.fungus }}],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: '细菌',
                    data: [{{ type_correlations.bacteria.virus }}, 0,
                             {{ type_correlations.bacteria.parasite }},
                             {{ type_correlations.bacteria.fungus }}],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: '寄生虫',
                    data: [{{ type_correlations.parasite.virus }},
                             {{ type_correlations.parasite.bacteria }}, 0,
                             {{ type_correlations.parasite.fungus }}],
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    borderColor: 'rgba(255, 206, 86, 1)',
                    borderWidth: 1
                },
                {
                    label: '真菌',
                    data: [{{ type_correlations.fungus.virus }},
                             {{ type_correlations.fungus.bacteria }},
                             {{ type_correlations.fungus.parasite }}, 0],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    beginAtZero: true
                }
            }
        }
    });
}

// 初始化地区分布热度图
function initRegionChart() {
    const ctx = document.getElementById('regionChart').getContext('2d');
    const regionStats = JSON.parse('{{ region_stats|tojson|safe }}');
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Object.keys(regionStats),
            datasets: [{
                label: '病原体数量',
                data: Object.values(regionStats).map(item => item.count),
                backgroundColor: '#FF6384'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '地区分布热度'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 初始化类型传播趋势图
function initTypeSpreadChart() {
    const ctx = document.getElementById('typeSpreadChart').getContext('2d');
    const spreadData = JSON.parse('{{ spread_data|safe }}');
    const types = ['virus', 'bacteria', 'parasite', 'fungus'];
    const uniqueDates = [...new Set(spreadData.map(item => item.date))].sort();
    
    const datasets = types.map((type, index) => {
        const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
        return {
            label: type,
            data: uniqueDates.map(date => 
                spreadData.filter(item => item.date === date && item.type === type).length
            ),
            borderColor: colors[index],
            backgroundColor: colors[index],
            fill: false
        };
    });

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: uniqueDates,
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '类型传播趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

// 页面加载完成后初始化所有图表
document.addEventListener('DOMContentLoaded', function() {
    initTimeChart();
    initCorrelationChart();
    initRegionChart();
    initTypeSpreadChart();
});
</script>
{% endblock %} 